<template>
    <div class="default-main view-main">
        <Table ref="tableRef"></Table>
        <PlayerDialog></PlayerDialog>
    </div>
</template>

<script setup lang="ts">
import { ref, provide } from 'vue';
import { TableApi, TableState } from '@/components/table/table';
import Table from '@/components/table/index.vue';
import { defaultOptButtons, TableRow } from '@/components/table/index';
import PlayerDialog from '@/views/admin/devicechannel/PlayerDialog.vue';
import { useRoute, useRouter } from 'vue-router';
import { DeviceChannelTableDataState, DeviceChannelTableDialogState } from '@/views/admin/devicechannel/interface';
import { ElLoading, ElMessage } from 'element-plus';

defineOptions({
    name: 'AdminDeviceChannel',
});

const route = useRoute();
const router = useRouter();
const tableRef = ref();
const state = new TableState<DeviceChannelTableDataState, DeviceChannelTableDialogState>(
    new TableApi(
        new Map([
            ['page', '/api/web/device-channel/queryByPage'],
            ['edit', '/api/web/device-channel/update'],
            ['device-channel-play', '/api/web/device-channel/play-stream'],
        ])
    ),
    {
        pk: ['channel_id'],
        pagination: true,
        columns: [
            {
                prop: 'channel_id',
                label: '通道编号',
            },
            {
                prop: 'device_id',
                label: '设备编号',
            },
            {
                prop: 'channel_name',
                label: '通道名称',
            },
            {
                prop: 'channel_id',
                label: '快照',
            },
            {
                render: 'tag-state',
                prop: 'status',
                label: '状态',
                getTagStateColor: (row: TableRow) => {
                    if (row.status === true) {
                        return '#0c67ef';
                    }
                    return '#909399';
                },
                getTagStateText: (row: TableRow) => {
                    if (row.status === true) {
                        return '在线';
                    }
                    return '不在线';
                },
            },
            {
                show: false,
                prop: 'update_time',
                label: '更新时间',
                width: 220,
            },
            {
                show: false,
                prop: 'create_time',
                label: '创建时间',
                width: 220,
            },
            {
                render: 'buttons',
                label: '操作',
                align: 'center',
                width: 360,
                fixed: 'right',
                buttons: [
                    {
                        render: 'tipButton',
                        action_type: 'device-channel-play-btn',
                        title: '播放',
                        text: '播放',
                        type: 'primary',
                        class: 'table-row-edit',
                        icon: 'table-channel',
                        size: 'default',
                    },
                    ...defaultOptButtons(['edit'], 'default'),
                ],
            },
        ],
        condition: {
            page_no: 1,
            page_size: 10,
            device_id: route.params.device_id,
        },
    },
    new DeviceChannelTableDataState(),
    new DeviceChannelTableDialogState(),
    {
        header: {
            title: '国标设备通道列表',
            buttons: ['back', 'refresh', 'add', 'edit'],
        },
        form: {
            param_name: 'device',
        },
    }
);

state.addAction('back-button', () => {
    router.push({
        name: 'admin-device',
    });
});

state.addAction('device-channel-play-btn', (data: any, table: TableState<DeviceChannelTableDataState, DeviceChannelTableDialogState>) => {
    const loadingInstance = ElLoading.service({ fullscreen: true, text: '获取播放地址' });
    table.api
        .post('device-channel-play', {
            device_id: data.row.device_id,
            channel_id: data.row.channel_id,
        })
        .then((res) => {
            console.log(res);
            table.dialog.player.show = true;
        })
        .catch((error) => {
            console.error(error);
            ElMessage.error(`code: ${error.code} msg: ${error.msg}`);
        })
        .finally(() => {
            loadingInstance.close();
        });
});

state.addAction('device-channel-btn', (data: any) => {
    router.push({
        name: 'admin-device-channel-list',
        params: {
            device_id: data.row.device_id,
        },
    });
});

state.list();
// 绑定属性
provide('state', state);
</script>
